<style scoped type="text/css">
    * {
        box-sizing: border-box;
        font-size : 13px;
    }

     .at-ctn {
        position: fixed;
        min-height: 55%;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        background-color: #F3F3F3
    }

     .at-tabs {
        border-top: 1px solid #A3A3A3;
        border-bottom: 1px solid #A3A3A3;
        height: 40px;
        overflow: hidden;
    }

    .at-tabs .at-tab {
        float: left;
        min-width: 50px;
        text-align: center;
        line-height: 40px;
        padding: 0 10px;
        border-right: 1px solid #CCC;
        text-decoration: none;
        color: #333
    }

     .at-tabs .at-tab.at-active {
        background-color: #fff
    }

     .at-content {
        background-color: #fff;
        overflow-x: auto;
        overflow-y: auto;
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 40px;
        -webkit-overflow-scrolling: touch
    }

    .at-logs {
        display: none;
        position: relative;
        height: 100%
    }

     .at-logs .at-item {
        margin: 0;
        padding: 6px 8px;
        line-height: 1.3;
        border-bottom: 1px solid #eee;
        word-break: break-word
    }

    .at-logs .at-item-info {
        color: green
    }

   .at-logs .at-item-debug {
        color: #1C00CF
    }

    .at-logs .at-item-warn {
        color: #5C3B00;
        border-color: #FFF5C2;
        background-color: #FFFBE6
    }

     .at-logs .at-item-error {
        color: #FF0000;
        border-color: #FFD7D7;
        background-color: #FFF0F0
    }

    .at-logs.at-active {
        display: block
    }

    .at-toolbar {
        background-color: #F3F3F3;
        border-top: 1px solid #C1C1C1;
        line-height: 40px;
        -height: 40px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden
    }

     .at-toolbar .at-tool {
        text-decoration: none;
        color: #333;
        width: 50%;
        float: left;
        text-align: center;
        position: relative
    }

     .at-toolbar .at-tool:after {
        content: " ";
        position: absolute;
        top: 7px;
        bottom: 7px;
        right: 0;
        border-left: 1px solid #C1C1C1
    }

    .at-toolbar .at-tool-right:after {
        border: none
    }

    .at-hide {
        display: none;
    }
    .at-about{
        font-weight: bold;
        font-size: 20px;
        line-height: 60px;
        text-indent: 20px;
    }

    .at-entry{
        cursor: pointer;
        position: fixed;
        z-index: 10002;
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        bottom: 40px;
        right: 10px;
        border-radius: 20px 8px;
        background-color: black;
        color: white;
    }

    .at-entry-active{
        background-color: #5C5C5C;
    }

    .at-item-log .at-url{
        color:lightseagreen;

    }

    .at-url span{
        color:lightseagreen;
        font-weight: bold;
    }

    .at-sub-dt{
        text-indent :20px;
    }
</style>

<div class="at-entry" nc-id="atEntry" onclick="toggleEntry()"  ontouchstart="touchStart(event)" style="transform: translate3d({{tx}}px,{{ty}}px,0px);-webkit-transform: translate3d({{tx}}px,{{ty}}px,0px);">AlloyLever</div>
<div class="at-ctn {{#hide}}at-hide{{/hide}}">
    <div class="at-tabs">
        <a class="at-tab {{tab1}}" onclick="goto(1,event)"  href="javascript:;">Console</a>
        <a class="at-tab {{tab2}}" onclick="goto(2,event)"  href="javascript:;">XHR</a>
        <a class="at-tab {{tab3}}" onclick="goto(3,event)"  href="javascript:;">Resources</a>
        <a class="at-tab {{tab4}}" onclick="goto(4,event)"   href="javascript:;">Timeline</a>
    </div>
    <div class="at-content">
        <div class="at-logs {{content1}}">
            <div class="at-log">
                {{#logs}} <pre class="at-item at-item-{{type}}">{{msg}}</pre> {{/logs}}
            </div>
        </div>
        <div class="at-logs {{content2}}">
            {{#xhrs}}
                <div class="at-item at-item-log">
                    <div class="at-url"><div></div><span>[Request Url]</span></div>
                    <div class="at-sub-dt"><span>{{method}}</span>: {{rqsUrl}}</div>
                </div>
                <div class="at-item at-item-log">
                    <div  class="at-url"><span>[Response Url]</span></div>
                   <div class="at-sub-dt">{{rspUrl}}</div>
                </div>
                <div class="at-item at-item-log">
                    <div  class="at-url"><span>[Response Data]</span></div>
                    <pre class="at-json"><code>{{json}}</code></pre>
                </div>
            {{/xhrs}}
        </div>
        <div class="at-logs {{content3}}">
            <div class="at-item at-item-log">
                <div class="at-url">Cookie</div>
                <pre class="at-json"><code>{{resources.cookie}}</code></pre>
            </div>
            <div class="at-item at-item-log">
                <div class="at-url">LocalStorage</div>
                <pre class="at-json"><code>{{resources.storage}}</code></pre>
            </div>
        </div>
        <div class="at-logs {{content4}}">
            <div class="at-log">
                {{#timeline}} <p class="at-item at-item-log">{{msg}}</p> {{/timeline}}
            </div>
        </div>
    </div>
    <div class="at-toolbar">
        <a href="javascript:;" onclick="clearLogs()" class="at-tool at-clear">Clear</a><a href="https://github.com/AlloyTeam/Nuclear" class="at-tool at-tool-right">Powered By Nuclear</a>
    </div>
</div>